{% extends 'adminuser/base_admin.html' %}

{% block admin_title %}统计数据{% endblock %}

{% block admin_content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">网站概况</h5>
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-primary active" data-time-range="7">7天</button>
                    <button type="button" class="btn btn-outline-primary" data-time-range="30">30天</button>
                    <button type="button" class="btn btn-outline-primary" data-time-range="90">90天</button>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="card bg-primary text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总用户数</h6>
                                <h3 class="mb-0">{{ user_count }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ user_growth }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-success text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总故事数</h6>
                                <h3 class="mb-0">{{ story_count }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ story_growth }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-info text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总互动数</h6>
                                <h3 class="mb-0">{{ interaction_count }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ interaction_growth }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-warning text-white h-100">
                            <div class="card-body">
                                <h6 class="card-title text-white-50">总访问量</h6>
                                <h3 class="mb-0">{{ views_count }}</h3>
                                <p class="small mt-2 mb-0"><i class="bi bi-graph-up me-1"></i> 较上周增长 {{ views_growth }}%</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <canvas id="overviewChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">用户活跃度</h5>
            </div>
            <div class="card-body">
                <canvas id="userActivityChart" height="300"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card mb-4">
            <div class="card-header bg-light">
                <h5 class="mb-0">故事分类统计</h5>
            </div>
            <div class="card-body">
                <canvas id="categoryChart" height="300"></canvas>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0">每日统计数据</h5>
                <div class="input-group" style="width: 300px;">
                    <input type="date" id="date-from" class="form-control" 
                           value="{{ from_date|date:'Y-m-d' }}">
                    <span class="input-group-text">至</span>
                    <input type="date" id="date-to" class="form-control" 
                           value="{{ to_date|date:'Y-m-d' }}">
                    <button class="btn btn-outline-primary" type="button" id="date-filter-btn">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>新增用户</th>
                                <th>活跃用户</th>
                                <th>新增故事</th>
                                <th>总浏览量</th>
                                <th>点赞数</th>
                                <th>评论数</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for stat in daily_stats %}
                            <tr>
                                <td>{{ stat.date|date:"Y-m-d" }}</td>
                                <td>{{ stat.new_users }}</td>
                                <td>{{ stat.active_users }}</td>
                                <td>{{ stat.new_stories }}</td>
                                <td>{{ stat.total_views }}</td>
                                <td>{{ stat.likes }}</td>
                                <td>{{ stat.comments }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center py-4">
                                    <div class="text-muted">
                                        <i class="bi bi-exclamation-circle me-2"></i>没有统计数据
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                
                {% if daily_stats.has_other_pages %}
                <nav aria-label="Page navigation" class="mt-4">
                    <ul class="pagination justify-content-center">
                        {% if daily_stats.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% if from_date %}&from_date={{ from_date|date:'Y-m-d' }}{% endif %}{% if to_date %}&to_date={{ to_date|date:'Y-m-d' }}{% endif %}" aria-label="First">
                                <span aria-hidden="true">&laquo;&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ daily_stats.previous_page_number }}{% if from_date %}&from_date={{ from_date|date:'Y-m-d' }}{% endif %}{% if to_date %}&to_date={{ to_date|date:'Y-m-d' }}{% endif %}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="First">
                                <span aria-hidden="true">&laquo;&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for i in daily_stats.paginator.page_range %}
                            {% if daily_stats.number == i %}
                            <li class="page-item active"><a class="page-link" href="#">{{ i }}</a></li>
                            {% elif i > daily_stats.number|add:'-3' and i < daily_stats.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ i }}{% if from_date %}&from_date={{ from_date|date:'Y-m-d' }}{% endif %}{% if to_date %}&to_date={{ to_date|date:'Y-m-d' }}{% endif %}">{{ i }}</a>
                            </li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if daily_stats.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ daily_stats.next_page_number }}{% if from_date %}&from_date={{ from_date|date:'Y-m-d' }}{% endif %}{% if to_date %}&to_date={{ to_date|date:'Y-m-d' }}{% endif %}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ daily_stats.paginator.num_pages }}{% if from_date %}&from_date={{ from_date|date:'Y-m-d' }}{% endif %}{% if to_date %}&to_date={{ to_date|date:'Y-m-d' }}{% endif %}" aria-label="Last">
                                <span aria-hidden="true">&raquo;&raquo;</span>
                            </a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li class="page-item disabled">
                            <a class="page-link" href="#" aria-label="Last">
                                <span aria-hidden="true">&raquo;&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取Chart.js的数据
    const overviewData = {
        labels: [{% for date in chart_dates %}'{{ date|date:"m-d" }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
        datasets: [
            {
                label: '新增用户',
                backgroundColor: 'rgba(13, 110, 253, 0.2)',
                borderColor: 'rgba(13, 110, 253, 1)',
                borderWidth: 2,
                data: [{% for stat in chart_data.new_users %}{{ stat }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                tension: 0.3
            },
            {
                label: '新增故事',
                backgroundColor: 'rgba(25, 135, 84, 0.2)',
                borderColor: 'rgba(25, 135, 84, 1)',
                borderWidth: 2,
                data: [{% for stat in chart_data.new_stories %}{{ stat }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                tension: 0.3
            },
            {
                label: '浏览量',
                backgroundColor: 'rgba(255, 193, 7, 0.2)',
                borderColor: 'rgba(255, 193, 7, 1)',
                borderWidth: 2,
                data: [{% for stat in chart_data.views %}{{ stat }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                tension: 0.3
            }
        ]
    };
    
    // 概览图表
    const overviewCtx = document.getElementById('overviewChart').getContext('2d');
    const overviewChart = new Chart(overviewCtx, {
        type: 'line',
        data: overviewData,
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '过去7天总览'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 用户活跃度图表
    const userActivityCtx = document.getElementById('userActivityChart').getContext('2d');
    const userActivityChart = new Chart(userActivityCtx, {
        type: 'bar',
        data: {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            datasets: [{
                label: '活跃用户数',
                backgroundColor: 'rgba(13, 110, 253, 0.7)',
                data: [{% for value in user_activity_data %}{{ value }}{% if not forloop.last %},{% endif %}{% endfor %}]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    display: true,
                    text: '一周用户活跃度'
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 故事分类统计图表
    const categoryCtx = document.getElementById('categoryChart').getContext('2d');
    const categoryChart = new Chart(categoryCtx, {
        type: 'doughnut',
        data: {
            labels: [{% for cat in category_data.labels %}'{{ cat }}'{% if not forloop.last %}, {% endif %}{% endfor %}],
            datasets: [{
                data: [{% for count in category_data.counts %}{{ count }}{% if not forloop.last %}, {% endif %}{% endfor %}],
                backgroundColor: [
                    'rgba(13, 110, 253, 0.7)',
                    'rgba(25, 135, 84, 0.7)',
                    'rgba(255, 193, 7, 0.7)',
                    'rgba(220, 53, 69, 0.7)',
                    'rgba(32, 201, 151, 0.7)',
                    'rgba(108, 117, 125, 0.7)',
                    'rgba(111, 66, 193, 0.7)'
                ]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                },
                title: {
                    display: true,
                    text: '故事分类占比'
                }
            }
        }
    });
    
    // 时间范围按钮
    const timeRangeButtons = document.querySelectorAll('[data-time-range]');
    timeRangeButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除所有按钮的active类
            timeRangeButtons.forEach(btn => btn.classList.remove('active'));
            // 添加当前按钮的active类
            this.classList.add('active');
            
            // 获取选中的时间范围
            const timeRange = this.getAttribute('data-time-range');
            
            // 这里应该发送AJAX请求获取对应时间范围的数据
            // 为了简便起见，我们只是更改标题
            const overviewChartTitle = overviewChart.options.plugins.title;
            overviewChartTitle.text = `过去${timeRange}天总览`;
            overviewChart.update();
        });
    });
    
    // 日期筛选
    const dateFilterBtn = document.getElementById('date-filter-btn');
    dateFilterBtn.addEventListener('click', function() {
        const fromDate = document.getElementById('date-from').value;
        const toDate = document.getElementById('date-to').value;
        
        if (fromDate && toDate) {
            window.location.href = `?from_date=${fromDate}&to_date=${toDate}`;
        }
    });
});
</script>
{% endblock %} 